<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>微信网页版</title>
		<link rel="stylesheet" type="text/css" href="css/css.css" />
		<script src="js/jquery1.11.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div id="main">
			<div id="chat">
				<div id="left">
					<div id="left_1">
						<img id="touxiang" src="img/266007025355415553.jpg" />
						<span>Sunshine刘小威</span>
						<img class="caidan1" src="img/04.png" /><img class="caidan2" src="img/05.png" />
					</div>
					<div id="left_1_bigImg"><img src="img/left_1_big_img.png" />
						<div id="left_1_bigImg_btn"></div>
					</div>;
					<div id="left_2"><img src="img/06.png" /><input id="left_2_input" type="text" id="" placeholder="搜索" /></div>
					<div id="left_3">
						<img src="img/left_3_green1.png" /><img src="img/left_3_white2.png" /><img src="img/left_3_white3.png" />
						<ul id="sousuo">
							<li class="sousuo_first">好友</li>
							<ul id="sousuo_content">
							</ul>
							<!--<li class="sousuo_li"><img src="img/A1.jpg"/></li>
							<li>3</li>
							<li>4</li>-->
						</ul>
					</div>
					<div id="left_4">
						<div id="left_4_div">
							<p>A</p>
							<div style="background-color: #3A3F45;"><span><img src="img/A1.jpg"/></span><span class="txt">A高建春</span></div>
							<div><span><img src="img/A2.jpg"/></span><span class="txt">AE齐越</span></div>
							<div><span><img src="img/A3.jpg"/></span><span class="txt">唉呀妈呀</span></div>
							<p>B</p>
							<div><span><img src="img/B1.jpg"/></span><span class="txt">布衣泽</span></div>
							<div><span><img src="img/B2.jpg"/></span><span class="txt">brave</span></div>
							<div><span><img src="img/B3.jpg"/></span><span class="txt">不知不觉</span></div>
							<p>C</p>
							<div><span><img src="img/C1.jpg"/></span><span class="txt">曹老师</span></div>
							<div><span><img src="img/C2.jpg"/></span><span class="txt">常老师</span></div>
							<div><span><img src="img/C3.jpg"/></span><span class="txt">陈彩爽</span></div>
							<p>D</p>
							<div><span><img src="img/D1.jpg"/></span><span class="txt">杜胜元</span></div>
							<div><span><img src="img/D2.jpg"/></span><span class="txt">丁明辉</span></div>
						</div>
						<ul id="left_4_ul">
							<li class="even"><img src="img/webwxgeticon.jpg" /><span>天津全接触</span></li>
							<li class="odd"><span>天津148起“毒驾”被查！这些药物吃完开车竟也按毒驾罚？</span><img src="img/left4_odd_img1.png" /></li>
							<li class="even"><img src="img/webwxgeticon (1).jpg" /><span>天津出发</span></li>
							<li class="odd"><span>全国大牌景区疯狂降价！最高净省200元！1月底就结束啦，速</span><img src="img/left4_odd_img2.png" /></li>
							<li class="even"><img src="img/webwxgeticon5.jpg" /><span>天津雅颂居</span></li>
							<li class="odd"><span>【第816期】node服务的监控预警系统架构</span><img src="img/left4_odd_img3.png" /></li>
							<li class="even"><img src="img/webwxgeticon (3).jpg" /><span>前端早读课</span></li>
							<li class="odd"><span>2017的初雪·来的正是时候...</span><img src="img/left4_odd_img4.png" /></li>
							<li class="even"><img src="img/webwxgeticon06.jpg" /><span>天津玩乐汇</span></li>
							<li class="odd"><span>传遍朋友圈的这100张天津卫老照片，太震撼了！你见过几张？</span><img src="img/left4_odd_img5.png" /></li>
						</ul>
						<table id="tab" cellpadding="0" cellspacing="0">
							<tr class="tab_TX1">
								<td name="td" id="1" class="grayqian">
									<img  src="img/webwxgetmsgimg.jpg" />
									<span>Marvel曼</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="2" class="graysheng">
									<img  src="img/touxiang07.jpg" />
									<span>文件传输助手</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="3" class="graysheng">
									<img  src="img/touxiang05.jpg" />
									<span>赵聪聪</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="4" class="graysheng">
									<img  src="img/touxiang06.jpg" />
									<span>刘培瞳</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="5" class="graysheng">
									<img src="img/wrq.jpg" />
									<span>王瑞芹</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="6" class="graysheng">
									<img src="img/touxiang03.jpg" />
									<span>宇宙第一凶</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="7" class="graysheng">
									<img  src="img/touxiang04.jpg" />
									<span>凶回去</span>
								</td>
							</tr>
							<tr class="tab_TX1">
								<td name="td" id="8" class="graysheng">
									<img id="tab_touxiang" src="img/touxiang02.jpg" />
									<span>凶死你</span>
								</td>
							</tr>
						</table>
					</div>
				</div>

				<div id="right_B">
					<div id="right_B_1"><span id="right_B_1_span"></span></div>
					<div id="right_B_2">
						<img src="img-right2/00.png" /><img src="img-right2/0.gif" /><img src="img-right2/1.gif" /><img src="img-right2/03.png" /><img src="img-right2/4.png" /><img src="img-right2/5.png" /><img src="img-right2/6.png" /><img src="img-right2/7.png" /><img src="img-right2/8.png" /><img src="img-right2/9.png" /><img src="img-right2/10.png" /><img src="img-right2/12.png" />
					</div>
				</div>
				<div id="right_C">
					<div id="right_C_1"><span id="right_C_1_span">详细信息</span></div>
					<div id="right_C_2">
						<div id="right_C_2_div"><img src="img/A1.jpg" /></div>
						<ul style=" margin-left: 320px; width: 666px; position: relative;top: 100px;text-align: center;">
							<li style="font-size: 22px;position: absolute;left: 43%; top: -50px;"><span id="right_C_2_li1">A大高建春 </span><img style="width: 20px; position: relative; left: 0px; top: 0px;" src="img/sex_nan.png" /></li>
							<li style="font-size: 12px;color: #909090;margin-top: 50px;">15122904881</li>
							<li style="font-size: 12px;color: #909090;margin-top: 20px;">备注：<span id="right_C_2_li3">A高建春</span></li>
							<li style="font-size: 12px;color: #909090;margin-top: 8px ;"><span>地区：天津 和平</span></li>
						</ul>
						<p>发消息</p>
					</div>
				</div>
				<div id="right">
					<div id="right_1"><span><span id="right_1_txt">Marvel曼</span><img src="img/下箭头.png" /></span>
					</div>
					<div id="right_2">
						<div id="tjqunliao">
							<div id="tjqunliao_1">
								<p style="line-height: 50px;color: #545454;text-align: center;">发起聊天</p>
								<p style="line-height: 30px;color: #30892D;text-align: center; font-size: 14px;font-weight: bold;"><span style="margin-right: 50px;">选择联系人</span><span>选择群聊</span></p>
							</div>
							<div id="tjqunliao_2">
								<div></div><img src="img/fangdajing_white.png" /><input type="text" placeholder="搜索" name="" id="" value="" />
							</div>
							<ul id="tjqunliao_3">
							</ul>
							<div id="tjqunliao_4">
								<p style="width: 190px;height: 40px;color: white;background-color: #3CAF36;border-radius:3px;text-align: center;line-height: 40px;margin: auto;margin-top: 30px;cursor: pointer;">确定</p>
							</div>
						</div>
						<div id="xialatu">
							<button id="xialatu_btn"></button>
							<div id="xialatu_img">
								<img src="img/webwxgetmsgimg.jpg" /> <span>Marvel曼</span>
							</div>
						</div>
						<ul id="content">
						</ul>
						<div id="face_div">
							<div class="face_div1">
								<ul>
									<li class="QQface"><span>QQ表情</span></li>
								</ul>
							</div>
							<div class="face_div2">
								<table id="face_tab">
									<tr>
										<td><img src="faceImg/1.gif" /><span style="position: absolute; z-index: -10;">[微笑]</span></td>
										<td><img src="faceImg/2.gif" /><span style="position: absolute; z-index: -10;">[撇嘴]</span></td>
										<td><img src="faceImg/3.gif" /><span style="position: absolute; z-index: -10;">[色]</span></td>
										<td><img src="faceImg/4.gif" /><span style="position: absolute; z-index: -10;">[发呆]</span></td>
										<td><img src="faceImg/5.gif" /><span style="position: absolute; z-index: -10;">[流泪]</span></td>
										<td><img src="faceImg/6.gif" /><span style="position: absolute; z-index: -10;">[害羞]</span></td>
										<td><img src="faceImg/7.gif" /><span style="position: absolute; z-index: -10;">[闭嘴]</span></td>
										<td><img src="faceImg/8.gif" /><span style="position: absolute; z-index: -10;">[睡]</span></td>
										<td><img src="faceImg/9.gif" /><span style="position: absolute; z-index: -10;">[大哭]</span></td>
										<td><img src="faceImg/10.gif" /><span style="position: absolute; z-index: -10;">[尴尬]</span></td>
										<td><img src="faceImg/11.gif" /><span style="position: absolute; z-index: -10;">[发怒]</span></td>
										<td><img src="faceImg/12.gif" /><span style="position: absolute; z-index: -10;">[调皮]</span></td>
										<td><img src="faceImg/13.gif" /><span style="position: absolute; z-index: -10;">[呲牙]</span></td>
										<td><img src="faceImg/14.gif" /><span style="position: absolute; z-index: -10;">[惊讶]</span></td>
										<td><img src="faceImg/15.gif" /><span style="position: absolute; z-index: -10;">[难过]</span></td>
									</tr>
									<tr>
										<td><img src="faceImg/16.gif" /><span style="position: absolute; z-index: -10;">[冷汗]</span></td>
										<td><img src="faceImg/17.gif" /><span style="position: absolute; z-index: -10;">[抓狂]</span></td>
										<td><img src="faceImg/18.gif" /><span style="position: absolute; z-index: -10;">[吐]</span></td>
										<td><img src="faceImg/19.gif" /><span style="position: absolute; z-index: -10;">[偷笑]</span></td>
										<td><img src="faceImg/20.gif" /><span style="position: absolute; z-index: -10;">[可爱]</span></td>
										<td><img src="faceImg/21.gif" /><span style="position: absolute; z-index: -10;">[白眼]</span></td>
										<td><img src="faceImg/22.gif" /><span style="position: absolute; z-index: -10;">[傲慢]</span></td>
										<td><img src="faceImg/23.gif" /><span style="position: absolute; z-index: -10;">[饥饿]</span></td>
										<td><img src="faceImg/24.gif" /><span style="position: absolute; z-index: -10;">[困]</span></td>
										<td><img src="faceImg/25.gif" /><span style="position: absolute; z-index: -10;">[惊恐]</span></td>
										<td><img src="faceImg/26.gif" /><span style="position: absolute; z-index: -10;">[流汗]</span></td>
										<td><img src="faceImg/27.gif" /><span style="position: absolute; z-index: -10;">[憨笑]</span></td>
										<td><img src="faceImg/28.gif" /><span style="position: absolute; z-index: -10;">[大兵]</span></td>
										<td><img src="faceImg/29.gif" /><span style="position: absolute; z-index: -10;">[奋斗]</span></td>
										<td><img src="faceImg/30.gif" /><span style="position: absolute; z-index: -10;">[咒骂]</span></td>
									</tr>
									<tr>
										<td><img src="faceImg/31.gif" /><span style="position: absolute; z-index: -10;">[疑问]</span></td>
										<td><img src="faceImg/32.gif" /><span style="position: absolute; z-index: -10;">[嘘...]</span></td>
										<td><img src="faceImg/33.gif" /><span style="position: absolute; z-index: -10;">[晕]</span></td>
										<td><img src="faceImg/34.gif" /><span style="position: absolute; z-index: -10;">[折磨]</span></td>
										<td><img src="faceImg/35.gif" /><span style="position: absolute; z-index: -10;">[衰]</span></td>
										<td><img src="faceImg/36.gif" /><span style="position: absolute; z-index: -10;">[敲打]</span></td>
										<td><img src="faceImg/37.gif" /><span style="position: absolute; z-index: -10;">[再见]</span></td>
										<td><img src="faceImg/38.gif" /><span style="position: absolute; z-index: -10;">[擦汗]</span></td>
										<td><img src="faceImg/39.gif" /><span style="position: absolute; z-index: -10;">[抠鼻]</span></td>
										<td><img src="faceImg/40.gif" /><span style="position: absolute; z-index: -10;">[嗅大了]</span></td>
										<td><img src="faceImg/41.gif" /><span style="position: absolute; z-index: -10;">[坏笑]</span></td>
										<td><img src="faceImg/42.gif" /><span style="position: absolute; z-index: -10;">[左哼哼]</span></td>
										<td><img src="faceImg/43.gif" /><span style="position: absolute; z-index: -10;">[右哼哼]</span></td>
										<td><img src="faceImg/44.gif" /><span style="position: absolute; z-index: -10;">[哈欠]</span></td>
										<td><img src="faceImg/45.gif" /><span style="position: absolute; z-index: -10;">[鄙视]</span></td>
									</tr>
									<tr>
										<td><img src="faceImg/46.gif" /><span style="position: absolute; z-index: -10;">[委屈]</span></td>
										<td><img src="faceImg/47.gif" /><span style="position: absolute; z-index: -10;">[快哭了]</span></td>
										<td><img src="faceImg/48.gif" /><span style="position: absolute; z-index: -10;">[阴险]</span></td>
										<td><img src="faceImg/49.gif" /><span style="position: absolute; z-index: -10;">[亲亲]</span></td>
										<td><img src="faceImg/50.gif" /><span style="position: absolute; z-index: -10;">[吓]</span></td>
										<td><img src="faceImg/51.gif" /><span style="position: absolute; z-index: -10;">[可怜]</span></td>
										<td><img src="faceImg/52.gif" /><span style="position: absolute; z-index: -10;">[拥抱]</span></td>
										<td><img src="faceImg/53.gif" /><span style="position: absolute; z-index: -10;">[月亮]</span></td>
										<td><img src="faceImg/54.gif" /><span style="position: absolute; z-index: -10;">[太阳]</span></td>
										<td><img src="faceImg/55.gif" /><span style="position: absolute; z-index: -10;">[炸弹]</span></td>
										<td><img src="faceImg/56.gif" /><span style="position: absolute; z-index: -10;">[骷髅]</span></td>
										<td><img src="faceImg/57.gif" /><span style="position: absolute; z-index: -10;">[菜刀]</span></td>
										<td><img src="faceImg/58.gif" /><span style="position: absolute; z-index: -10;">[猪头]</span></td>
										<td><img src="faceImg/59.gif" /><span style="position: absolute; z-index: -10;">[西瓜]</span></td>
										<td><img src="faceImg/60.gif" /><span style="position: absolute; z-index: -10;">[咖啡]</span></td>
									</tr>
									<tr>
										<td><img src="faceImg/61.gif" /><span style="position: absolute; z-index: -10;">[米饭]</span></td>
										<td><img src="faceImg/62.gif" /><span style="position: absolute; z-index: -10;">[爱心]</span></td>
										<td><img src="faceImg/63.gif" /><span style="position: absolute; z-index: -10;">[强]</span></td>
										<td><img src="faceImg/64.gif" /><span style="position: absolute; z-index: -10;">[弱]</span></td>
										<td><img src="faceImg/65.gif" /><span style="position: absolute; z-index: -10;">[握手]</span></td>
										<td><img src="faceImg/66.gif" /><span style="position: absolute; z-index: -10;">[胜利]</span></td>
										<td><img src="faceImg/67.gif" /><span style="position: absolute; z-index: -10;">[抱拳]</span></td>
										<td><img src="faceImg/68.gif" /><span style="position: absolute; z-index: -10;">[勾引]</span></td>
										<td><img src="faceImg/69.gif" /><span style="position: absolute; z-index: -10;">[我爱你]</span></td>
										<td><img src="faceImg/70.gif" /><span style="position: absolute; z-index: -10;">[差劲]</span></td>
										<td><img src="faceImg/71.gif" /><span style="position: absolute; z-index: -10;">[玫瑰]</span></td>
										<td><img src="faceImg/72.gif" /><span style="position: absolute; z-index: -10;">[凋谢]</span></td>
										<td><img src="faceImg/73.gif" /><span style="position: absolute; z-index: -10;">[示爱]</span></td>
										<td><img src="faceImg/74.gif" /><span style="position: absolute; z-index: -10;">[献吻]</span></td>
										<td><img src="faceImg/75.gif" /><span style="position: absolute; z-index: -10;">[飞吻]</span></td>
									</tr>

								</table>
							</div>
						</div>
					</div>
					<div id="right_3" style="position: relative;">
						<input style=" width: 20px;height: 20px; opacity: 0; left: 89px; top: 10px; position: absolute;" type="file" name="" id="" value="" />
						<img id="face" style="margin-left: 15px;" src="img/right_3_1.png" /><img src="img/right_3_2.png" /><img src="img/right_3_3.png" /></div>
					<div id="right_4"><textarea id="set_content"></textarea></div>
					<div id="right_5"><span class="right_5_txt">按下Ctrl+Enter换行</span><span class="right_5_set">发送</span></div>
				</div>
			</div>
		</div>
		
	</body>

</html>